import React from "react";
import { Layout, Menu } from 'antd'
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
import classNames from 'classnames'


import logo from '@/assets/logo.png';
import AvatarDropdown from '@/components/GlobalHeader/AvatarDropdown'



import styles from './BasicLayout.less'

const { Header, Footer, Sider, Content } = Layout;

const projectList = [
  { id: '1', name: '京东物流' },
  { id: '2', name: '腾讯科技' },
  { id: '3', name: '阿里巴巴' },
];


export default function App() {

  const [currentMenu, setCurrentMenu] = React.useState('1');


  const handleMenuClick = (e) => {
    const value = e.target.id;

    console.log(e);


    setCurrentMenu(value)
    switch (value) {
      case '1':

        break;

      default:
        break;
    }
  }

  return (
    <div className={styles.cotnainer}>
      <Layout>
        <Header>
          <div>
            <img className={styles.logo} src={logo} alt="" />
            XX数据可视化配置平台
          </div>
          <AvatarDropdown currentUser={{ id: '1', name: '李霸天', avatar: 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png' }} />
        </Header>
        <Layout>
          <Sider>
            <div className={styles.addProjectBtn}>
              <PlusOutlined />
              新建项目
            </div>

            <div className={styles.projectListContainer} onClick={handleMenuClick}>
              {projectList.map((item) => (
                <div
                  className={classNames(currentMenu === item.id ? styles.activeItem : '', styles.projectItem)}
                  key={item.id}
                  id={item.id}
                >
                  <div className={currentMenu === item.id ? styles.activeItemDiv : ''}></div>
                  <div> {item.name}</div>
                  <div>
                    <DeleteOutlined />
                  </div>
                </div>))
              }
            </div>

          </Sider>
          <Content>Content</Content>
        </Layout>
        <Footer>Footer</Footer>
      </Layout>
    </div>
  );
}
